<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Snap! SVG</title>
		<link href="css/screen.css?__inline=true" media="screen, projection" rel="stylesheet" type="text/css" />
		<!--[if IE]>
	        <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
	    <![endif]-->
	</head>
	<body>
		<svg id="ad" width="400" height="400">
			<g id="meshAContainer">
				<rect x="0" y="0" width="400" height="400" fill="#efefef"/>
			</g>
			
			<g id="screen1">
				<text id="text1" x="200" y="130" width="400" 
					class="base-font"
					font-weight="100" 
					font-size="40" 
					fill="#686868"
					text-anchor="middle">
					Screens
				</text>
			
				<text id="text2" x="200" y="300" width="400" 
					class="base-font"
					font-weight="100" 
					font-size="40" 
					fill="#686868"
					text-anchor="middle">
					SVG
				</text>
			</g>
			
			<text id="text3"
				class="base-font"
				font-weight="100" 
				font-size="50" 
				fill="white"
				text-anchor="middle"
				opacity="0">
				<tspan x="200" y="180">Make SVG</tspan>
				<tspan x="200" y="250">a Snap!</tspan>
			</text>
			
			<g id="heart" transform="translate(200, 200)">
				<path id="heart-shape" fill="#0DAE8A" d="M14.803-28.95c-5.879,0-11.119,2.418-14.547,6.192c-3.428-3.774-8.668-6.192-14.547-6.192c-10.329,0-23.453,4.75-23.453,23.75s38,35.414,38,35.414s38-16.414,38-35.414S25.133-28.95,14.803-28.95"/>
			</g>
			
			<g id="burst" transform="translate(200, 200)" opacity="0">
				<polygon fill="#FFFFFF" points="0.451,0.063 149.256,-214.94 227.256,-214.94 	"/>
				<polygon fill="#FFFFFF" points="0.451,0.063 49.256,-214.94 77.256,-214.94 	"/>
				<polygon fill="#FFFFFF" points="0.451,0.063 -78.328,-214.94 -50.744,-212.273 	"/>
				<polygon fill="#FFFFFF" points="0.451,0.063 -113.661,209.06 -86.077,211.727 	"/>
				<polygon fill="#FFFFFF" points="0.451,0.063 -239.41,-214.94 -213.41,-135.607 	"/>
				<polygon fill="#FFFFFF" points="0.451,0.063 -239.41,-39 -213.41,10.334 	"/>
				<polygon fill="#FFFFFF" points="0.451,0.063 -239.41,101 -213.41,130.334 	"/>
				<polygon fill="#FFFFFF" points="0.451,0.063 215.697,21.383 241.697,50.717 	"/>
				<polygon fill="#FFFFFF" points="0.451,0.063 215.697,-88.617 241.697,-59.283 	"/>
				<polygon fill="#FFFFFF" points="0.451,0.063 208.691,137.42 207.805,194.354 	"/>
				<polygon fill="#FFFFFF" points="0.451,0.063 95.256,211.727 61.923,240.194 	"/>
			</g>
			
			<g id="resolve" opacity="0">
				
				<g id="replay-btn" transform="translate(345, 10)">
					<rect fill="transparent" width="48" height="49.5"/>
					<path fill="#cccccc" d="M25.207,9.594V4.082L12.793,11.25l12.415,7.168v-5.792C31.57,13.466,36.5,18.912,36.5,25.5
						c0,7.168-5.832,13-13,13s-13-5.832-13-13c0-0.565,0.049-1.118,0.119-1.664l-2.922-0.717C7.58,23.898,7.5,24.689,7.5,25.5
						c0,8.822,7.178,16,16,16s16-7.178,16-16C39.5,17.255,33.229,10.449,25.207,9.594z"/>
				</g>
				
				<text id="text4"
					font-weight="100" 
					fill="#02225d"
					text-anchor="middle">
					<tspan x="200" y="100" 
						class="base-font"
						font-size="46">
						with
					</tspan>
					<tspan x="200" y="160" 
						class="snap-font"
						font-size="70">
						Snap.svg
					</tspan>
				</text>
				
				<g id="learn-btn" transform="translate(10, 350)">
					<path fill="#0B9B87" d="M147.129,37.886c0,3.156-2.558,5.714-5.714,5.714H5.714C2.558,43.6,0,41.042,0,37.886V8.175
						c0-3.156,2.558-5.714,5.714-5.714h135.702c3.156,0,5.714,2.558,5.714,5.714V37.886z"/>
					<path fill="#10B29C" d="M147.129,35.425c0,3.156-2.558,5.714-5.714,5.714H5.714C2.558,41.139,0,38.581,0,35.425V5.714
						C0,2.558,2.558,0,5.714,0h135.702c3.156,0,5.714,2.558,5.714,5.714V35.425z"/>
					<text x="10" y="30"
						fill="#FFFFFF" 
						class="base-font"
						font-size="22.6026">
						Learn More
					</text>
				</g>
				
				<g id="snap-logo" transform="translate(200, 260)">
					<path id="snap-logo-bottom" fill="#192350" d="M39.197,39.001c0.061,0.246,0.121,0.492,0.182,0.738c-12.801,6.518-39.257,19.54-39.257,19.54
						s-31.604-14.952-38.953-18.708c6.5-3.264,13.001-6.529,19.502-9.792c6.328,3.094,12.655,6.187,18.985,9.281
						c6.617-3.305,13.03-6.509,19.442-9.712C25.797,33.232,32.497,36.116,39.197,39.001z"/>
					<path id="snap-logo-right" fill="#03A69A" d="M39.331-54.922c-0.436-0.191-12.519,6.201-18.125,9.588c0,11.23,0,22.46,0,34.096
						C15.45-8.229-33.891,16.743-40.257,20.134c0.058,6.744,0.117,13.489,0.175,20.233c0.417,0.068,0.834,0.136,1.25,0.204
						c6.5-3.264,72.753-37.591,78.221-40.492C39.369-18.255,39.35-36.588,39.331-54.922z"/>
					<path id="snap-logo-top" fill="#1E2A5A" d="M39.331-54.922c-5.606,3.387-12.519,6.201-18.126,9.588c-7.193-3.185-14.386-6.371-21.719-9.617
						c-7.287,3.21-14.6,6.432-21.914,9.654c-5.869-2.958-11.739-5.916-17.609-8.874c-0.039-0.239-0.078-0.478-0.117-0.717
						c12.766-6.485,25.531-12.969,38.297-19.454C11.437-68.06,26.037-61.204,39.331-54.922z"/>
					<path id="snap-logo-left" fill="#133F68" d="M-22.676-11.256c0-3.489,0-6.949,0-10.408c0-7.878,0.198-15.755,0.346-23.633
						c-5.869-2.958-11.788-5.916-17.658-8.874c0.003,11.317-0.018,22.635-0.015,33.952c-0.034,6.737-0.081,13.474-0.114,20.21
						c5.781,2.841,52.704,26.952,59.219,30.356c6.7,2.884,13.397,5.769,20.096,8.654c0.029-6.258,0.134-12.516,0.163-18.773
						C33.044,16.882-15.406-7.438-22.676-11.256z"/>
				</g>
				
				<g id="adobe-logo" transform="translate(350, 340)">
					<polygon fill="#787878" points="22.447,0 35.605,0 35.605,31.389 	"/>
					<polygon fill="#787878" points="13.172,0 0,0 0,31.389 	"/>
					<polygon fill="#787878" points="17.809,11.565 26.195,31.387 20.698,31.387 18.189,25.074 12.049,25.074 	"/>
					<g>
						<path fill="#787878" d="M38.294,0c0.843,0,1.515,0.678,1.515,1.524c0,0.859-0.672,1.538-1.521,1.538S36.75,2.383,36.75,1.524
							C36.75,0.677,37.438,0,38.288,0H38.294z M38.287,0.259c-0.675,0-1.217,0.567-1.217,1.27c0,0.707,0.542,1.271,1.224,1.271
							c0.672,0.007,1.212-0.566,1.212-1.271c0-0.702-0.54-1.27-1.212-1.27H38.287z M38.01,2.414H37.7V0.716
							c0.144-0.025,0.285-0.049,0.512-0.049c0.271,0,0.442,0.053,0.556,0.141c0.094,0.068,0.146,0.188,0.146,0.346
							c0,0.22-0.142,0.363-0.33,0.411v0.017c0.149,0.026,0.245,0.161,0.277,0.414c0.042,0.265,0.077,0.367,0.105,0.419h-0.311
							c-0.039-0.052-0.075-0.207-0.112-0.435c-0.035-0.201-0.146-0.286-0.356-0.286h-0.179v0.721L38.01,2.414L38.01,2.414z M38.01,1.458
							h0.185c0.221,0,0.406-0.074,0.406-0.271c0-0.15-0.107-0.285-0.392-0.285c-0.093,0-0.152,0-0.197,0.005v0.552L38.01,1.458
							L38.01,1.458z"/>
					</g>
					<path fill="#787878" d="M4.782,44.511L4.366,42.05c-0.123-0.715-0.271-1.823-0.382-2.59H3.941c-0.124,0.771-0.294,1.914-0.42,2.596
						l-0.449,2.456L4.782,44.511L4.782,44.511z M2.847,46.12l-0.541,2.732h-2.01l2.501-11.373h2.457l2.271,11.373H5.507l-0.53-2.732
						H2.847z"/>
					<path fill="#787878" d="M12.086,43.77c0-0.147,0-0.329-0.03-0.492c-0.078-0.561-0.381-1.067-0.863-1.067
						c-0.818,0-1.125,1.188-1.125,2.575c0,1.599,0.437,2.51,1.096,2.51c0.309,0,0.662-0.157,0.854-0.826
						c0.045-0.131,0.069-0.314,0.069-0.523L12.086,43.77L12.086,43.77z M14.148,37.174v9.318c0,0.743,0.037,1.647,0.067,2.359h-1.779
						l-0.119-0.947h-0.041c-0.298,0.583-0.948,1.086-1.721,1.086c-1.702,0-2.547-1.874-2.547-4.238c0-2.877,1.263-4.275,2.629-4.275
						c0.711,0,1.182,0.346,1.415,0.852h0.034v-4.152h2.062C14.148,37.177,14.148,37.174,14.148,37.174z"/>
					<path fill="#787878" d="M18.428,47.415c0.782,0,0.982-1.474,0.982-2.697c0-1.159-0.2-2.67-1.018-2.67
						c-0.869,0-1.054,1.511-1.054,2.67c0,1.402,0.232,2.697,1.071,2.697H18.428z M18.387,48.989c-1.889,0-3.081-1.522-3.081-4.238
						c0-2.963,1.529-4.275,3.127-4.275c1.877,0,3.05,1.592,3.05,4.232c0,3.393-1.838,4.281-3.076,4.281H18.387z"/>
					<path fill="#787878" d="M24.692,45.907c0,0.204,0.035,0.399,0.078,0.525c0.206,0.693,0.561,0.863,0.837,0.863
						c0.795,0,1.12-1.004,1.12-2.612c0-1.462-0.343-2.472-1.129-2.472c-0.392,0-0.72,0.423-0.832,0.877
						c-0.039,0.142-0.074,0.363-0.074,0.521C24.692,43.609,24.692,45.907,24.692,45.907z M22.634,37.174h2.058v4.293h0.032
						c0.406-0.634,0.945-0.994,1.731-0.994c1.55,0,2.331,1.758,2.331,4.049c0,2.91-1.168,4.467-2.67,4.467
						c-0.723,0-1.199-0.32-1.631-1.123h-0.042l-0.112,0.986h-1.765c0.03-0.688,0.069-1.616,0.069-2.359v-9.318L22.634,37.174
						L22.634,37.174z"/>
					<path fill="#787878" d="M33.712,43.945c0.007-1.161-0.328-1.976-0.982-1.976c-0.749,0-1.064,1.094-1.088,1.976H33.712z
						 M31.635,45.393c0.024,1.49,0.811,1.978,1.788,1.978c0.623,0,1.153-0.135,1.545-0.287l0.282,1.474
						c-0.548,0.238-1.393,0.383-2.201,0.383c-2.211,0-3.411-1.498-3.411-4.067c0-2.759,1.394-4.408,3.221-4.408
						c1.769,0,2.748,1.458,2.748,3.85c0,0.545-0.026,0.85-0.063,1.093L31.635,45.393z"/>
				</g>
			</g>
			
			<rect id="cover" width="400" height="400" fill="#efefef"/>
		</svg>
		<script>
		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

		  ga('create', 'UA-47561728-1', 'codepen.io');
		  ga('send', 'pageview');

		</script>
		
		<script src="js/vendor/require.min.js?__inline=true"></script>
		<script src="js/main.js?__inline=true"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>

		<script>
			WebFont.load(WebFontConfig);
		</script>
		
	</body>
</html>
